<%--
  Created by IntelliJ IDEA.
  User: lt
  Date: 2018/6/21
  Time: 21:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计 -- 调查数据</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>

    <link rel="stylesheet" href="${contextPath}/static/XiaLaDuoXuan/css/public.css" media="all" />

    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet"/>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>

    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        .layui-input{
            height: 30px;
        }
        .multiSelect{
            margin-top: -33px;
        }
        th{
            text-align: center;
            vertical-align: middle;
        }
        td{
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <form class="form-inline layui-form" name="myForm" style="margin-bottom:20px;margin-top: 10px;">
        <div class="form-group">
            <input id="cityNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                   placeholder="市局名称">
        </div>
        <div class="form-group">
            <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                   placeholder="区县名称">
        </div>
        <div class="form-group">
            <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                   placeholder="客户经理名称">
        </div>
        <%--<div class="form-group">--%>
            <%--<input id="custNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"--%>
                   <%--placeholder="客户名称">--%>
        <%--</div>--%>

        <button type="button" class="btn btn-success btn-sm" onclick="queryObj();">查询</button>
        <button type="button" title="根据查询条件导出所有记录" onclick="exportExcel();"
                class="btn btn-info">导出Excel
        </button>
        <button type="button" class="btn btn-success btn-sm" onclick="doPrint();">打印</button>
        <button type="button" class="btn btn-success btn-sm" onclick="javascript:window.history.go(-2);window.close();">返回</button>
    </form>
    <div class="row" style="background-color: rgb(53, 147, 202);margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">主销及紧俏规格库存量及2019年元月份商定</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">

        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 600px">
        <!--startprint-->
        <table class="table table-bordered table-striped table-condensed table-hover" style="width: 4200px;">
            <thead style="background-color: #9fcdff">
                <tr>
                    <th rowspan="2">序号</th>
                    <th rowspan="2">客户经理</th>
                    <th rowspan="2">客户编号</th>
                    <th rowspan="2">客户名称</th>
                    <th rowspan="2">客户档位</th>
                    <th rowspan="2">客户总库存量</th>
                    <th rowspan="2">主销及紧俏规格<nav style="color: #dea8c4">库存量小计</nav></th>
                    <th rowspan="2">主销及紧俏规格<nav style="color: #dea8c4">协商量小计</nav></th>
                    <th colspan="2">白沙(和天下)</th>
                    <th colspan="2">云烟(软大重九)</th>
                    <th colspan="2">中华(软)</th>
                    <th colspan="2">贵烟(福)</th>
                    <th colspan="2">中华(硬)</th>
                    <th colspan="2">贵烟(硬高遵)</th>
                    <th colspan="2">贵烟(跨越)</th>
                    <th colspan="2">芙蓉王(硬)</th>
                    <th colspan="2">云烟(软珍品)</th>
                    <th colspan="2">玉溪(软)</th>
                    <th colspan="2">贵烟(萃)</th>
                    <th colspan="2">贵烟(喜)</th>
                    <th colspan="2">云烟(硬云龙)</th>
                    <th colspan="2">白沙(硬精品三代)</th>
                    <th colspan="2">利群(新版)</th>
                    <th colspan="2">贵烟(硬黄精品)</th>
                    <th colspan="2">云烟(紫)</th>
                    <th colspan="2">贵烟(金百合)</th>
                    <th colspan="2">红塔山(硬经典100)</th>
                    <th colspan="2">黄果树(佳遵)</th>
                    <th colspan="2">红塔山(硬经典)</th>
                    <th colspan="2">黄果树(蓝佳品)</th>
                    <th colspan="2">黄果树(长征红星照耀)</th>
                    <th colspan="2">红金龙(硬红龙)</th>
                    <th colspan="2">红旗渠(雪茄)</th>
                    <th colspan="2">遵义(软)</th>
                    <th colspan="2">贵烟(国酒香 30)</th>
                </tr>
                <tr>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>
                    <th>库存量</th>
                    <th>协商量</th>e
                </tr>
            </thead>
            <tbody>
            <tr v-for="(obj,index) in objList">
                <td>{{ index + 1 }}</td>
                <td>{{obj.slsmanName}}</td>
                <td>{{obj.custCode }}</td>
                <td>{{obj.custName}}</td>
                <td>{{obj.custOrderLevel}}</td>
                <td v-if="obj.fuStock != null">{{obj.fuStock}}</td>
                <td v-if="obj.y28 != null">{{obj.y28.split(',')[0]}}</td>
                <td v-if="obj.y28 != null">{{obj.y28.split(',')[1]}}</td>

                <td v-if="obj.y1 != null">{{obj.y1.split(',')[0]}}</td>
                <td v-if="obj.y1 != null">{{obj.y1.split(',')[1]}}</td>

                <td v-if="obj.y2 != null">{{obj.y2.split(',')[0]}}</td>
                <td v-if="obj.y2 != null">{{obj.y2.split(',')[1]}}</td>

                <td v-if="obj.y3 != null">{{obj.y3.split(',')[0]}}</td>
                <td v-if="obj.y3 != null">{{obj.y3.split(',')[1]}}</td>

                <td v-if="obj.y4 != null">{{obj.y4.split(',')[0]}}</td>
                <td v-if="obj.y4 != null">{{obj.y4.split(',')[1]}}</td>

                <td v-if="obj.y5 != null">{{obj.y5.split(',')[0]}}</td>
                <td v-if="obj.y5 != null">{{obj.y5.split(',')[1]}}</td>

                <td v-if="obj.y6 != null">{{obj.y6.split(',')[0]}}</td>
                <td v-if="obj.y6 != null">{{obj.y6.split(',')[1]}}</td>

                <td v-if="obj.y7 != null">{{obj.y7.split(',')[0]}}</td>
                <td v-if="obj.y7 != null">{{obj.y7.split(',')[1]}}</td>

                <td v-if="obj.y8 != null">{{obj.y8.split(',')[0]}}</td>
                <td v-if="obj.y8 != null">{{obj.y8.split(',')[1]}}</td>

                <td v-if="obj.y9 != null">{{obj.y9.split(',')[0]}}</td>
                <td v-if="obj.y9 != null">{{obj.y9.split(',')[1]}}</td>

                <td v-if="obj.y10 != null">{{obj.y10.split(',')[0]}}</td>
                <td v-if="obj.y10 != null">{{obj.y10.split(',')[1]}}</td>

                <td v-if="obj.y11 != null">{{obj.y11.split(',')[0]}}</td>
                <td v-if="obj.y11 != null">{{obj.y11.split(',')[1]}}</td>

                <td v-if="obj.y12 != null">{{obj.y12.split(',')[0]}}</td>
                <td v-if="obj.y12 != null">{{obj.y12.split(',')[1]}}</td>

                <td v-if="obj.y13 != null">{{obj.y13.split(',')[0]}}</td>
                <td v-if="obj.y13 != null">{{obj.y13.split(',')[1]}}</td>

                <td v-if="obj.y14 != null">{{obj.y14.split(',')[0]}}</td>
                <td v-if="obj.y14 != null">{{obj.y14.split(',')[1]}}</td>

                <td v-if="obj.y15 != null">{{obj.y15.split(',')[0]}}</td>
                <td v-if="obj.y15 != null">{{obj.y15.split(',')[1]}}</td>

                <td v-if="obj.y16 != null">{{obj.y16.split(',')[0]}}</td>
                <td v-if="obj.y16 != null">{{obj.y16.split(',')[1]}}</td>

                <td v-if="obj.y17 != null">{{obj.y17.split(',')[0]}}</td>
                <td v-if="obj.y17 != null">{{obj.y17.split(',')[1]}}</td>

                <td v-if="obj.y18 != null">{{obj.y18.split(',')[0]}}</td>
                <td v-if="obj.y18 != null">{{obj.y18.split(',')[1]}}</td>

                <td v-if="obj.y19 != null">{{obj.y19.split(',')[0]}}</td>
                <td v-if="obj.y19 != null">{{obj.y19.split(',')[1]}}</td>

                <td v-if="obj.y20 != null">{{obj.y20.split(',')[0]}}</td>
                <td v-if="obj.y20 != null">{{obj.y20.split(',')[1]}}</td>

                <td v-if="obj.y21 != null">{{obj.y21.split(',')[0]}}</td>
                <td v-if="obj.y21 != null">{{obj.y21.split(',')[1]}}</td>

                <td v-if="obj.y22 != null">{{obj.y22.split(',')[0]}}</td>
                <td v-if="obj.y22 != null">{{obj.y22.split(',')[1]}}</td>

                <td v-if="obj.y23 != null">{{obj.y23.split(',')[0]}}</td>
                <td v-if="obj.y23 != null">{{obj.y23.split(',')[1]}}</td>

                <td v-if="obj.y24 != null">{{obj.y24.split(',')[0]}}</td>
                <td v-if="obj.y24 != null">{{obj.y24.split(',')[1]}}</td>

                <td v-if="obj.y25 != null">{{obj.y25.split(',')[0]}}</td>
                <td v-if="obj.y25 != null">{{obj.y25.split(',')[1]}}</td>

                <td v-if="obj.y26 != null">{{obj.y26.split(',')[0]}}</td>
                <td v-if="obj.y26 != null">{{obj.y26.split(',')[1]}}</td>

                <td v-if="obj.y27 != null">{{obj.y27.split(',')[0]}}</td>
                <td v-if="obj.y27 != null">{{obj.y27.split(',')[1]}}</td>
            </tr>
            </tbody>
        </table>
        <!--endprint-->
    </div>
    <div style="text-align: right;margin-top: 10px;" id="pageDiv"></div>
</div>


<%--<form action="${contextPath}/ktCollect/ktOutCargo" method="post" target="_blank" id="goToDetailPage"--%>
      <%--style="display:none">--%>
    <%--<input type="text" id="shopIds" name="shopIds" value="">--%>
<%--</form>--%>

<form action="${contextPath}/api/qstiaires/exportExcels" method="post" id="exportExcel" style="display:none">
    <input type="hidden" name="inputSlsmanName" id="exportExcelParamTurnSlsmanName">
    <input type="hidden" name="inputChannelName" id="exportExcelParamTurnChannelName">
    <input type="hidden" name="inputCustName" id="exportExcelParamTurnCustName">
    <input type="hidden" name="tableType" value="qstiaires">
</form>
</body>

<!-- 打印 -->
<script type="text/javascript">
    function doPrint() {
        bdhtml=window.document.body.innerHTML;
        sprnstr="<!--startprint-->";
        eprnstr="<!--endprint-->";
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
        window.document.body.innerHTML=prnhtml;
        window.print();
        window.location.reload(); //刷新当前页面
    }
</script>

<script src=${contextPath}/static/layer/layui.all.js></script>
<script type="text/javascript">
    var turnTime = format(new Date(),"yyyy_MM_dd");
    var time = format(new Date(),"yyyy-MM-dd");

//    var shopId = '';

    var laypage = layui.laypage
        , layer = layui.layer;


    var queryModel = {
        // turnCreateDate: turnTime,
        // bindCreateDate: time,
//        shopId: '',
//         supplierId: '',
    }

    var app = new Vue({
        el: '#app',
        data: {
            objList: [],
            arrayShop: [],
        }
    })

    var getObj = function (queryModel) {
        console.log(queryModel);
        layer.load(1)
        $.ajax({
            url: '${contextPath}/api/qstiaires/getQstiaires', //localhost:8080
            type: 'post',
            data: queryModel,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false) {
                    layer.msg("获取出错：" + data.message)
                    return;
                }
                var dataArray = data.data;
                if (dataArray.length == 0) {
                    layer.msg("查询没有数据")
                }
                console.log(dataArray)
//                dataArray = qui(dataArray);
                app.objList = dataArray;
            },
            error: function (error) {
                layer.closeAll('loading');
                console.log(error)
            }
        })
    }



    var queryObj = function () {
        var channelName = $("#cityNameInput").val();  //市级服务部  市局名称
        if(channelName == '六盘水'){
            queryModel.custCodeTop = '5202';
        }

        var quXianNameInput = $("#quXianNameInput").val(); //区县名称
        var custNameInput = $("#custNameInput").val();  //客户名称
        var empNameInput = $("#empNameInput").val();    //客户经理名称
        if(quXianNameInput != ''){
            queryModel.channelName = quXianNameInput;
        }
        if(custNameInput != ''){
            queryModel.custName = custNameInput;
        }

        if(empNameInput != '') {
            queryModel.channelName = '';
            queryModel.slsmanName = empNameInput;  //客户经理
        }

        getObj(queryModel)
    }

    //页面加载完后调用
    $(function () {
        queryObj();
    })


    $('#turnCreateDate').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
//        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        minuteStep:1
//        startDate:new Date(),
    });


    $('#bindCreateDate').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
//        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        minuteStep:1
//        startDate:new Date(),
    });



    var exportExcel = function () {

        var channelName = $("#cityNameInput").val();  //市级服务部  市局名称
        if(channelName == '六盘水'){
            queryModel.custCodeTop = '5202';
        }

        var quXianNameInput = $("#quXianNameInput").val(); //区县名称
        var custNameInput = $("#custNameInput").val();  //客户名称
        var empNameInput = $("#empNameInput").val();    //客户经理名称
        if(quXianNameInput != ''){
            queryModel.channelName = quXianNameInput;
        }
        if(custNameInput != ''){
            queryModel.custName = custNameInput;
        }

        if(empNameInput != '') {
            queryModel.channelName = '';
            queryModel.slsmanName = empNameInput;  //客户经理
        }

        $("#exportExcelParamTurnChannelName").val(queryModel.channelName)
        $("#exportExcelParamBindSlsmanName").val(queryModel.slsmanName)
        $("#exportExcel").submit();
    }


    //***************** 采购明细 ************
    function toKtInsCargo(shopId, supplierId){
        var turnCreateDate = $("#turnCreateDate").val();
        var bindCreateDate = $("#bindCreateDate").val();
        window.location.href = "${contextPath}/ktcount/ktInsCargo?supplierId="+supplierId+"&turnCreateDate="+turnCreateDate+"&bindCreateDate="+bindCreateDate;
    }
    //***************** 退货明细 ************
    function toKtOutCargo(shopId, supplierId){
        var turnCreateDate = $("#turnCreateDate").val();
        var bindCreateDate = $("#bindCreateDate").val()
        window.location.href = "${contextPath}/ktcount/ktOutCargo?supplierId="+supplierId+"&turnCreateDate="+turnCreateDate+"&bindCreateDate="+bindCreateDate;
    }

    //*******************************

    function qui(orderList) {
        var shortName = '合计';
        var orderNo = 0;
        var ordAmtSum = 0;
        var successOrderNo = 0;
        var successOrdAmtSum = 0;
//        //console.log("orderList="+orderList.length);
        for (var i=0; i<orderList.length; i++){
            orderNo = orderList[i].orderNo + orderNo;
            ordAmtSum = orderList[i].ordAmtSum + ordAmtSum;
            successOrderNo = orderList[i].successOrderNo + successOrderNo;
            successOrdAmtSum = orderList[i].successOrdAmtSum + successOrdAmtSum;
        }
        var map = {"shortName" : shortName, "orderNo" : orderNo, "ordAmtSum" : ordAmtSum,
            "successOrderNo" : successOrderNo, "successOrdAmtSum" : successOrdAmtSum}
//        //console.log("map="+map.shortName+" "+map.ordAmtSum);
        orderList.push(map);
        return orderList;
    }

    //******************* 表头固定 *********************
    // Code goes here
    'use strict'
    window.onload = function(){
        var tableCont = document.querySelector('#tableContainer')
        /**
         * scroll handle
         * @param {event} e -- scroll event
         */
        function scrollHandle (e){
            //console.log(this)
            var scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }

        tableCont.addEventListener('scroll',scrollHandle)
    }

    //****************************************

    $('#turnCreateDate').val(turnTime);
    $('#bindCreateDate').val(time);
    function format(date,str){
        var mat={};
        mat.M=date.getMonth()+1;//月份记得加1
        mat.H=date.getHours();
        mat.s=date.getSeconds();
        mat.m=date.getMinutes();
        mat.Y=date.getFullYear();
        mat.D=date.getDate();
        mat.d=date.getDay();//星期几
        mat.d=check(mat.d);
        mat.H=check(mat.H);
        mat.M=check(mat.M);
        mat.D=check(mat.D);
        mat.s=check(mat.s);
        mat.m=check(mat.m);
        if(str.indexOf(":")>-1){
            mat.Y=mat.Y.toString().substr(2,2);
            return mat.Y+"/"+mat.M+"/"+mat.D;
        }
        if(str.indexOf("/")>-1){
            return mat.Y+"/"+mat.M+"/"+mat.D+" "+mat.H+"/"+mat.m+"/"+mat.s;
        }
        if(str.indexOf("-")>-1){
            return mat.Y+"-"+mat.M+"-"+mat.D;
        }
        if(str.indexOf("_")>-1){
            return mat.Y+"-"+mat.M+"-01";
        }
    }
    //检查是不是两位数字，不足补全
    function check(str){
        str=str.toString();
        if(str.length<2){
            str='0'+ str;
        }
        return str;
    }


    var cityNode, quXianNode, channelNode, empNode, custNode, shopNode = null;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>

    organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);


</script>
</html>